<template>
  <div class="app-container" style="margin-right: 0;padding-right: 0">

    <el-row :gutter="20">
      <el-col :span="showFlow?19:24">
        <div class="card-wrap flex-column justify-end card-padding">

          <el-tabs v-model="activeName">
            <el-tab-pane label="司机基本信息" name="first">
              <el-descriptions title="">
                <el-descriptions-item label="司机姓名">{{
                    form.driverName|filterNull
                  }}
                </el-descriptions-item>
                <el-descriptions-item label="联系电话">{{
                    form.driverPhone|filterNull
                  }}
                </el-descriptions-item>
                <el-descriptions-item label="劳务公司">{{
                    form.laborCompanyName|filterNull
                  }}
                </el-descriptions-item>
                <el-descriptions-item label="所在城市">
                  {{ form.cityName|filterNull }}
                </el-descriptions-item>

                <el-descriptions-item label="所属公司">{{
                    form.belongCompanyName|filterNull
                  }}
                </el-descriptions-item>
                <el-descriptions-item label="驾照发放日">
                  {{ form.driverLicenseDate|filterNull }}
                </el-descriptions-item>
                <el-descriptions-item label="驾照种类">
                  {{ form.driverLicenseType|filterNull }}
                </el-descriptions-item>
                <el-descriptions-item label="驾照号码">
                  {{ form.driverLicenseNo|filterNull }}
                </el-descriptions-item>
                <el-descriptions-item label="nc供应商id">
                  {{ form.ncSupplierId|filterNull }}
                </el-descriptions-item>
                <el-descriptions-item label="nc供应商code">
                  {{ form.ncSupplierCode|filterNull }}
                </el-descriptions-item>
                <el-descriptions-item label="备注">
                  {{ form.remark|filterNull }}
                </el-descriptions-item>
                <el-descriptions-item label="删除备注" v-if="1==form.delStatus">
                  {{ form.delRemark|filterNull }}
                </el-descriptions-item>

                <el-descriptions-item label="身份证">
                  <div class="flex">
                    <ImageCommon disabled v-model="form.identityFrontImg"></ImageCommon>
                    <ImageCommon disabled v-model="form.identityBackImg"></ImageCommon>
                  </div>
                </el-descriptions-item>
                <el-descriptions-item label="驾驶证">
                  <div class="flex">
                    <ImageCommon disabled v-model="form.driverLicenseFrontImg"></ImageCommon>
                    <ImageCommon disabled v-model="form.driverLicenseBackImg"></ImageCommon>
                  </div>
                </el-descriptions-item>

              </el-descriptions>
              <el-table border :data="form.driverBankAccounts" style="width: 100%">
                <el-table-column type="index" key="index" width="50" align="center" label="序号"/>

                <el-table-column prop="accountName" key="accountName" align="center" label="开户名称"/>

                <el-table-column prop="bankName" key="bankName" align="center" label="开户银行"/>

                <el-table-column prop="accountNumber" key="accountNumber" align="center" label="银行账户"/>

                <el-table-column prop="accountStatus" key="accountStatus" align="center" label="是否为生效账号">
                  <template #default="{row}">
            <span>{{
                0 == row.accountStatus ? '是' : 1 == row.accountStatus ? '否' : '--'
              }}</span>
                  </template>
                </el-table-column>

              </el-table>
            </el-tab-pane>

            <el-tab-pane label="客户车辆信息" name="second">
              <el-table
                  border
                  :data="datalist"
                  style="width: 100%">
                <el-table-column
                    prop="orderCarCode"
                    align="center"
                    label="订单编码"
                    width="280">
                </el-table-column>
                <el-table-column
                    prop="leaseeName"
                    align="center"
                    label="客户名称"
                    width="280">
                </el-table-column>
                <el-table-column
                    prop="carPlateNo"
                    align="center"
                    label="车牌号">
                </el-table-column>
                <el-table-column
                    prop="contractDate"
                    align="center"
                    label="有效时间">
                </el-table-column>
              </el-table>
            </el-tab-pane>
          </el-tabs>

        </div>
      </el-col>
      <el-col :span="showFlow?5:0" style="margin: -20px -20px 20px 0">
        <FlowRecord v-if="showFlow" :id="form.flowId"></FlowRecord>
      </el-col>
    </el-row>

    <div class="card-wrap flex justify-end card-padding" style="margin-right: 20px">
      <el-button @click="cancel">返回</el-button>
      <!--              <el-button :loading="buttonLoading" type="primary" @click="submitForm">保存</el-button>-->
    </div>

  </div>
</template>

<script>


import {driverDetail, getCarInfoByCustomerId} from "@/api/memberManage/driverList";

export default {
  name: "driverDetail",
  data() {
    return {
      buttonLoading: false,
      form: {},
      activeName: 'first',
      datalist: []
    };
  },
  computed: {
    showFlow() {
      return 'write' != this.state && this.form.flowId !== undefined && this.form.flowId !== null && this.form.flowId !== ''
    }
  },
  watch: {
    '$route': {
      handler(val) {
        console.log('this.$route', this.$route)

        if (val && val.name == this.$options.name) {
          if (this.$route.query && this.$route.query.driverId && !this.$route.query.tabClick) {
            this.getOldData(this.$route.query.driverId)
          }
        }
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    cancel() {
      this.$router.back();
      this.$store.dispatch('tagsView/delView', this.$route);
    },
    getOldData(driverId) {
      driverDetail(driverId).then(res => {
        this.form = res.data
      })

      getCarInfoByCustomerId(driverId).then(res => {
        this.datalist = res.data
      })
    },
  }
};
</script>


<style lang="scss" scoped>


</style>
